<!DOCTYPE html>
<!-- saved from url=(0054)http://wx.zhongfubang.com/yiyuan_buy.html?family_id=91 -->
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<link href="./css/mui.min.css" rel="stylesheet">
		<link href="./css/recharge.css" rel="stylesheet">
		<style type="text/css" abt="234"></style>
		<style type="text/css"></style>
		<script>
			//console.log('a')
		</script>
		<script>
			//remove 17173 video ad
		</script>
		<style type="text/css">
			object,
			embed {
				-webkit-animation-duration: .001s;
				-webkit-animation-name: playerInserted;
				-ms-animation-duration: .001s;
				-ms-animation-name: playerInserted;
				-o-animation-duration: .001s;
				-o-animation-name: playerInserted;
				animation-duration: .001s;
				animation-name: playerInserted;
			}
			
			@-webkit-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@-ms-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@-o-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			#div {
				width: 0px;
				height: 0px;
				background: red;
				position: fixed;
				top: 70%;
				left: 50%;
			}
			/*移除底部或顶部三角,需要在删除此代码*/
			
			.mui-popover .mui-popover-arrow:after {
				width: 0px;
			}
		</style>
	</head>

	<body style="">
		<header class="mui-bar mui-bar-nav bgcolor">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">购买计划</h1>
		</header>
		<div id="app" class="mui-content">
			<div class="mui-card">
				<div class="mui-card-header  mui-card-media">
					<div class="mui-media-body">
						<div class="mui-row row1"><span>加入计划</span></div>
						<div class="mui-row row2"><span>{{product.name}}</span></div>
					</div>
				</div>
				<div class="mui-card-content">
					<div class="mui-row">
						<p class="parti">参与人（真实姓名／身份证号码）</p>
					</div>
					<div class="mui-row">
						<template v-if="selectType == 1">
							<p id="info" class="textcolor parti-name">
								{{user_info.realName}}/{{user_info.idCode}}
							</p>
						</template>
						<template v-if="selectType == 2">
							<p id="info" class="textcolor parti-name">
								{{family.realName}}/{{family.idCode}}
							</p>
						</template>
					</div>
					<div class="mui-row vip-row">
						<div class="mui-pull-left">
							<p>会员年费<span class="mui-icon mui-icon-info textcolor"></span></p>
						</div>
						<div class="mui-pull-right money">
							<p>￥ <span class="number">{{vipAnnualFeeStatus.data}}</span>
							</p>
						</div>
					</div>
					<div class="mui-row recharge-row">
						<div class="mui-pull-left">
							<p> 充值金额（元) </p>
						</div>
						<div class="mui-pull-right money">
							<p>￥<span class="number">{{product.applyAmount}}</span></p>
						</div>
					</div>
					<div class="mui-row discount-row">
						<div class="mui-pull-left">
							<p>
								实际支付 （元）
							</p>
						</div>
						<div class="mui-pull-right"><span class="textcolor money">￥<i id="money" class="number textcolor">{{product.applyAmount+vipAnnualFeeStatus.data}}</i></span></div>
					</div>
					<div>

					</div>
					<div class="mui-button-row">
						<button type="button" onclick="payMonney();" class="mui-btn mui-btn-primary">购买</button></div>
				</div>
			</div>
			<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell"><span class="alipay"> <span>微信支付</span></span>
					</li>
				</ul>
			</div>
		</div>
		<div id="div">
		</div>
		<!--操作表-->

		<script src="./js/mui.js"></script>
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript" src="./js/common.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});

			/*function setIframeHeight(iframe) {
				if(iframe) {
					var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
					if(iframeWin.document.body) {
						iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
					}
				}
			};*/
			window.onload = function() {
				setIframeHeight(document.getElementById('showZhifuContentFrame'));
			};

			//mui.ready();

			var vue = new Vue({
				el: "#app",
				data: {
					user_info: JSON.parse(localStorage.appUser),
					family: [],
					product: [],
					showPeopleData: [],
					order_num: 0,
					recharge_price: 1,
					productId: '',
					applyPeopleId: '',
					balance: 0,
					order_id: -1,
					vipAnnualFeeStatus: [],
					selectType: '', // 1 个人 2 家庭
					showZhifuContent: []
				},
				methods: {
					wxpay: function(event) {

						var jsApiParameters = JSON.parse(getpar('jsApiParameters'));
						window.location.href = "https://wx.zhongfubang.com/api/index.php/Home/Ajax/wxpay/?type=yiyuan&user_id=" + user_id + "&family_id=" + vue.family_id + "&order_id=" + vue.order_id;
					},
					check_order: function(event) {
						if(vue.family_id == "") {
							vue.family_id = -1;
						}
						var url = root + 'check_yiyuan_order';
						mui.post(url, {
								user_id: user_id,
								family_id: vue.family_id
							},
							function(data) {
								var code = data.code;
								if(code == 1) {
									vue.add_yiyuan_order();
								}
								if(code == 2) {
									mui.toast("您已购买过该计划，请勿重复购买");
								}

							}, 'json'
						);
					},
					add_yiyuan_order: function(event) {
						var url = root + 'add_yiyuan_order';
						mui.post(url, {
								user_id: user_id,
								family_id: vue.family_id
							},
							function(data) {
								var code = data.code;
								if(code == 1) {
									vue.order_id = data.order_id;
									vue.wxpay();

								}
								if(code == 2) {
									mui.toast("您已购买过该计划，请勿重复购买");
								}
								if(code == 0) {
									mui.toast("购买失败,请重试");
								}
							}, 'json'
						);
					},

				}
			})

			window.onload = load();

			function load() {
				getChooseProduct();
				get_product();
				get_user_info();
				//alert($.getUrlParam("code"));
				//mui.ready();
			}
			
			function getChooseProduct(){
				var userId = JSON.parse(localStorage.appUser).id;
				var chooseProduct = ajaxAction(root+"wechat/getChooseProduct",{appUserId:userId}).data;
				vue.applyPeopleId = chooseProduct.applyPeopleId;
				vue.productId = chooseProduct.productId;
				vue.selectType = chooseProduct.type;
			}

			function get_user_info() {
				if(!isLogin()) {
					return;
				}
				var url = root + "myCenter/detailAppUser";
				mui.get(url, {
						appUserId: JSON.parse(localStorage.appUser).id
					},
					function(result) {
						vue.user_info = result.data;
						if(vue.selectType == 1) {
							vue.showPeopleData = result.data;
							showVipAnnualFee(vue.user_info.idCode);
						}
					}, 'json');
			}

			function get_product() {
				if(isNull(vue.applyPeopleId) || isNull(localStorage.appUser)) {
					mui.openWindow('login.html', '', {});
					return;
				}
				var url = root + 'index/selectProductDetail';
				mui.get(url, {
						id: vue.productId
					},
					function(data) {
						vue.product = data.data;
					}, 'json'
				);
				if(vue.selectType == 2) {
					url = root + 'index/detailFamily';
					mui.get(url, {
							id: vue.applyPeopleId
						},
						function(data) {
							vue.family = data.data;
							vue.showPeopleData = vue.family;
							showVipAnnualFee(vue.family.idCode);
						}, 'json'
					);
				}
				/*if(vue.family_id != -1) {
					url = root + 'get_family_info';
					uid = vue.family_id;
				}
				url = root + 'get_user_order_num';
				mui.post(url, {
						user_id: user_id
					},
					function(data) {
						vue.order_num = data.order_num;
						vue.balance = data.balance;

					}, 'json'
				);*/
			}

			function showVipAnnualFee(idCode) {
				var url = root + 'index/selectVipAnnualFeeByIdCodeAndYear';
				mui.get(url, {
						idCode: idCode
					},
					function(data) {
						vue.vipAnnualFeeStatus = data;
					}, 'json'
				);
			}

			function changeFrameHeight(){
		    var ifm= document.getElementById("showZhifuContentFrame"); 
		    ifm.height=document.documentElement.clientHeight;
			}
			
			/**
			 *支付 
			 */
			function payMonney() {
				var appUser = JSON.parse(localStorage.appUser);
				if(isNull(appUser)) {
					return;
				}
				var idCode="";
				if(vue.selectType==1){//个人
					idCode = appUser.idCode;
				}else{//家人
					idCode = vue.family.idCode;
				}
				var url=root + "payment/selectPaymentStatus";
				var resultStatus = ajaxAction(url,{appUserId: appUser.id,productId: vue.productId,idCode:idCode});
				if(resultStatus.status=="success"&&resultStatus.data.status==1){
					mui.alert("您已经支付成功，无需再次购买该产品");
					return;
				}
				//mui("#popover").popover('toggle', document.getElementById("div"));
				var param = "&appUserId="+appUser.id+"&idCode="+idCode+"&type="+vue.selectType;
				param+="&productId="+vue.productId+"&applyPeopleId="+vue.applyPeopleId;
				intervalSearch();
				pay(param);//微信支付
			}
			
			
			
			function pay(param){
				$.ajax({
					type: "POST",
					url: root+"wechat/jsAPIorder?code="+$.getUrlParam("code")+param,
					data: {},
					dataType: "json",
					success: function(result) {
						if(result.status=="success"){
							payAction(result.data);
						}else{
							alert("支付出错");
						}
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						alert("请求异常");
					}
	});
			}
			
			function payAction(data){
				 WeixinJSBridge.invoke( 'getBrandWCPayRequest', {
                "appId":data.appId,     //公众号名称,由商户传入
                "timeStamp":data.timeStamp,         //时间戳,自1970年以来的秒数
                "nonceStr":data.nonceStr, //随机串
                "package":data.package,
                "signType":data.signType,         //微信签名方式：
                "paySign":data.paySign //微信签名
            }, function(res){
                console.log(res);
               if(res.err_msg == "get_brand_wcpay_request:ok" ){
               		alert("支付结果返回"+SON.stringify())
               		mui.toast('支付成功');
               		window.location.href = "order_list.html?pay=success";
      			  }else{
      			  	mui.toast('支付失败');
      			  }
            	});
			}
			
			//window.setTimeout(closePaymentWindow,5000); 
			var selectPaymentStatusIndex;
			function intervalSearch()
			{   
				selectPaymentStatusIndex=window.setInterval(selectPaymentStatus, 1000);
			}
			/**
			 * 查询支付状态
			 */
			function selectPaymentStatus(){
				var appUser = JSON.parse(localStorage.appUser);
				var url=root + "payment/selectPaymentStatus";
				if(vue.selectType==1){//个人
					idCode = appUser.idCode;
				}else{//家人
					idCode = vue.family.idCode;
				}
				mui.post(url, {
							appUserId: appUser.id,
							productId: vue.productId,
							idCode:idCode
						},
						function(result) {
							if(result.status=="success"&&(result.data.status==1||result.data.status==3)){
								window.clearInterval(selectPaymentStatusIndex);
								if(result.data.status==1){
									window.location.href = root+"APP/order_list.html?pay=success";
								}
								
							}
						}, 'json'
					);
			}

			
		</script>

	</body>

</html>